<template>
  <div class="custom-form">
    <el-row :gutter="15">
      <el-form ref="elForm" v-loading="loadings1" :model="formData" :rules="rules" size="medium" label-width="100px"
        :key="showFormKey">
        <!-- 差旅及招待报销 -->
        <el-col :span="24">
          <el-form-item label-width="0">
            <h2 align='center' style="color:undefined;font-size: nullpx;text-align: center">差旅及招待报销</h2>
          </el-form-item>
        </el-col>
        <!-- 职级名称 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('职级名称')" prop="F_Job">
            <el-input v-model="formData['F_Job']" placeholder="请输入职级名称"
              :disabled="hasDisabledPermission('F_Job',false)"
              :readonly="!hasEditPermission('F_Job',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 地区 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('地区')" prop="F_Area">
            <el-input v-model="formData['F_Area']" placeholder="请输入地区"
              :disabled="hasDisabledPermission('F_Area',false)"
              :readonly="!hasEditPermission('F_Area',false)" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 申请人ID -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('申请人ID')" prop="F_UserId">
              <el-input v-model="formData['F_UserId']" placeholder="请输入申请人ID"
                :disabled="hasDisabledPermission('F_UserId',false)"
                :readonly="!hasEditPermission('F_UserId',false)" clearable :style="{width: '100%'}">
              </el-input>
          </el-form-item>
        </el-col>
        <!-- 申请人名称 -->
        <el-col :span="24" >
          <el-form-item :label="$t('申请人名称')" prop="F_UserName">
            <el-input v-model="formData['F_UserName']" placeholder="请输入申请人名称"
              :disabled="hasDisabledPermission('F_UserName',false)"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 申请时间 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('申请时间')" prop="F_ApplyTime">
            <el-date-picker :disabled="hasDisabledPermission('F_ApplyTime',false)"
              :readonly="!hasEditPermission('F_ApplyTime',false)" v-model="formData['F_ApplyTime']"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" placeholder="请选择申请时间"
              clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 部门名称 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('部门名称')" prop="F_DepartmentName">
            <el-input v-model="formData['F_DepartmentName']" placeholder="请输入部门名称"
              :disabled="hasDisabledPermission('F_DepartmentName',false)"
              :readonly="!hasEditPermission('F_DepartmentName',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 部门 -->
        <el-col :span="24" >
          <el-form-item :label="$t('部门')" prop="F_Department">
              <el-select v-model="formData['F_Department']" placeholder="请选择部门"
                :disabled="hasDisabledPermission('F_Department',false)" 
                @change="Handleselect"
                filterable clearable
                :style="{width: '100%'}">
                <el-option v-for="(item, index) in departmentData" :key="index" :label="item.F_ShortName"
                  :value="item.F_DepartmentId"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <!-- 角色ID -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('角色ID')" prop="F_RoleId">
              <el-input v-model="formData['F_RoleId']" 
                placeholder="请输入角色ID"
                :disabled="hasDisabledPermission('F_RoleId',false)"
                :readonly="!hasEditPermission('F_RoleId',false)" 
                clearable 
                :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 角色名称 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('角色名称')" prop="F_RoleName">
            <el-input v-model="formData['F_RoleName']" placeholder="请输入角色名称"
              :disabled="hasDisabledPermission('F_RoleName',false)"
              :readonly="!hasEditPermission('F_RoleName',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
         <!-- 支付公司选择 -->
        <el-col :span="24" >
          <el-form-item :label="$t('支付公司')" prop="F_payment_company">
            <el-select v-model="formData['F_payment_company']" placeholder="请选择适用范围"
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in paymentCompany_typeOptions" :key="index" :label="item.F_ItemName"
                :value="item.F_ItemValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 报销类型 -->
        <el-col :span="24" >
          <el-form-item :label="$t('报销类型')" prop="F_ExpenseType">
            <el-select v-model="formData['F_ExpenseType']" placeholder="请选择报销类型"
              :disabled="hasDisabledPermission('F_ExpenseType',false)" filterable clearable
              @change="selectBXLX"
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in expense_typeOptions" :key="index" :label="item.F_ItemName"
                :value="item.F_ItemValue" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 差旅表格\招待表格 -->
        <el-col :span="24" >
          <el-form-item>
            <div v-show="travelTypeFlag1">
              <div class="office_things width1000">
                  <div class="table_header1">
                    <div class="table_header1_xuhao border">序号</div>
                    <div class="table_header1_qingdan border">单程/往返</div>
                    <div class="table_header1_shuliang border">出发地</div>
                    <div class="table_header1_shuliang border">目的地</div>
                    <div class="table_header1_shuliang border">出发时间</div>
                    <div class="table_header1_shuliang border">到达时间</div>
                    <!-- <div class="table_header1_shuliang border">出差天数</div> -->
                    <div class="table_header1_shuliang border">交通方式</div>
                    <div class="table_header1_shuliang border">交通费用</div>
                    <div class="table_header1_shuliang border">住宿费用</div>
                    <div class="table_header1_shuliang text-overflow border" title="公共交通/打车费">公共交通/打车费</div>
                    <div class="table_header1_caozuo border">操作</div>
                  </div>
                  <!-- 合计 -->
                  <div class="table_header2">
                    总计：{{totalCost.transportCost+totalCost.accommodationCost+totalCost.otherFees}}元；
                    交通费用:{{totalCost.transportCost}}元；
                    住宿费用:{{totalCost.accommodationCost}}元；
                    公共交通/打车费:{{totalCost.otherFees}}元；
                  </div>
                  <div class="table_body1" v-for="(item,index) in formData['F_OaExpTravelJourneys']" :key="index">
                      <!-- 序号 -->
                      <div class="table_header1_xuhao border">{{index+1}}</div>
                      <!-- 单程、往返 -->
                      <div class="table_header1_qingdan border">
                          <el-select v-model="item.ticket_type" placeholder="请点击选择">
                            <el-option
                              v-for="item in dcData"
                              :key="item.value"
                              :label="item.F_ItemName"
                              :value="item.F_ItemValue">
                            </el-option>
                          </el-select>
                      </div>
                      <!-- 出发地 -->
                      <div class="table_header1_shuliang border">
                        <el-input class="el_input_items" v-model="item.origin" placeholder="请输入出发地"></el-input>
                      </div>
                      <!-- 目的地 -->
                      <div class="table_header1_shuliang border">
                        <el-input class="el_input_items" v-model="item.destination" placeholder="请输入目的地"></el-input>
                      </div>
                      <!-- 出发时间 -->
                      <div class="table_header1_shuliang border">
                        <el-date-picker
                          v-model="item.departure_time"
                          type="date"
                          placeholder="选择出发时间">
                        </el-date-picker>
                      </div>
                      <!-- 到达时间 -->
                      <div class="table_header1_shuliang border">
                        <el-date-picker
                          v-model="item.arrival_time"
                          type="date"
                          placeholder="选择到达时间">
                        </el-date-picker>
                      </div>
                      <!-- 出差天数 -->
                      <!-- <div class="table_header1_shuliang border">
                        <el-input class="el_input_items" v-model="item.travel_day_length" placeholder="请输入出差天数"></el-input>
                      </div> -->
                      <!-- 交通方式 -->
                      <div class="table_header1_shuliang border">
                        <el-select v-model="item.transport_mode" placeholder="请选择交通方式">
                            <el-option
                              v-for="item in dcData1"
                              :key="item.value"
                              :label="item.F_ItemName"
                              :value="item.F_ItemValue">
                            </el-option>
                          </el-select>
                      </div>
                      <!-- 交通费用 -->
                      <div class="table_header1_shuliang border">
                        <el-input class="el_input_items" type="number" v-model.number="item.transport_cost" placeholder="请输入交通费用"></el-input>
                      </div>
                      <!-- 住宿费用 -->
                      <div class="table_header1_shuliang border">
                        <el-input class="el_input_items" type="number" v-model.number="item.accommodation_cost" placeholder="请输入住宿费用"></el-input>
                      </div>
                      <!-- 公共交通/打车费 -->
                      <div class="table_header1_shuliang border">
                        <el-input class="el_input_items" type="number" v-model.number="item.other_fees" placeholder="公共交通/打车费"></el-input>
                      </div>
                      <div class="table_header1_caozuo border"> 
                        <el-link type="danger" @click="delItems(item,index)">删除</el-link>
                      </div>
                  </div>
                  <div class="table_bottom_buttons">
                    <el-button class="new-add" icon="el-icon-plus" @click="addItems">新增</el-button>
                  </div>
                </div>
            </div>
            <div v-show="travelTypeFlag2">
              <div class="office_things">
                  <div class="table_header1">
                    <div class="table_header1_xuhao border">序号</div>
                    <div class="table_header1_shuliang border">招待对象</div>
                    <div class="table_header1_shuliang border">我方陪同人员</div>
                    <div class="table_header1_shuliang border">事由说明</div>
                    <div class="table_header1_caozuo border">操作</div>
                  </div>
                  <div class="table_body1" v-for="(item,index) in formData['F_OaExpTravelEntertains']" :key="index">
                      <!-- 序号 -->
                      <div class="table_header1_xuhao border">{{index+1}}</div>
                      <!-- 招待对象 -->
                      <div class="table_header1_shuliang border">
                        <el-input class="el_input_items" v-model="item.entertain_object" placeholder="请输入招待对象"></el-input>
                      </div>
                      <!-- 我方陪同人员 -->
                      <div class="table_header1_shuliang border">
                        <el-input class="el_input_items" v-model="item.our_accompanyPersonal" placeholder="请输入我方陪同人员"></el-input>
                      </div>
                      <!-- 事由说明 -->
                      <div class="table_header1_shuliang border">
                        <el-input class="el_input_items" v-model="item.cause_description" placeholder="请输入事由说明"></el-input>
                      </div>
                      <!-- 删除 -->
                      <div class="table_header1_caozuo border"> 
                        <el-link type="danger" @click="delItems1(item,index)">删除</el-link>
                      </div>
                  </div>
                  <div class="table_bottom_buttons">
                    <el-button class="new-add" icon="el-icon-plus" @click="addItems1">新增</el-button>
                  </div>
                </div>
            </div>
          </el-form-item>
        </el-col>
        <!-- 出差天数 -->
        <el-col :span="24">
          <el-form-item :label="$t('出差天数')" prop="travelDays">
            <el-input type="number" v-model.number="formData['travelDays']" placeholder="请输入出差天数"
              :style="{width: '100%'}">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 出差补助 -->
        <el-col :span="24">
          <el-form-item :label="$t('出差补助')" prop="travelAllowance">
            <el-input type="number" readonly="true" v-model.number="formData['travelAllowance']" placeholder="根据出差天数计算得出"
              :style="{width: '100%'}">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 联系人ID -->
        <!-- <el-col :span="24">
          <el-form-item :label="$t('联系人ID')" prop="F_ContactUserId">
              <el-input v-model="formData['F_ContactUserId']" placeholder="请输入联系人ID"
                :disabled="hasDisabledPermission('F_ContactUserId',false)"
                :readonly="!hasEditPermission('F_ContactUserId',false)" clearable
                :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col> -->
        <!-- 联系人名称 -->
        <el-col :span="24">
          <el-form-item :label="$t('联系人名称')" prop="F_ContactUserName">
            <!-- <el-input v-model="formData['F_ContactUserName']" placeholder="请输入联系人"
              :disabled="hasDisabledPermission('F_ContactUserName',false)"
              :readonly="!hasEditPermission('F_ContactUserName',false)" clearable
              @focus="selectUser(2)"
              :style="{width: '100%'}"></el-input> -->
              <SelectOneStaff @transmissionData="transmissionData" />
          </el-form-item>
        </el-col>
        <!-- 收款人ID -->
        <!-- <el-col :span="24">
          <el-form-item :label="$t('收款人ID')" prop="F_CollectionUserId">
            <el-input v-model="formData['F_CollectionUserId']" placeholder="请输入收款人"
              :disabled="hasDisabledPermission('F_CollectionUserId',false)"
              :readonly="!hasEditPermission('F_CollectionUserId',false)" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col> -->
        <!-- 收款人名称 -->
        <el-col :span="24" >
          <el-form-item :label="$t('收款人名称')" prop="F_CollectionUserName">
            <!-- <el-input v-model="formData['F_CollectionUserName']" placeholder="请输入收款人"
              :disabled="hasDisabledPermission('F_CollectionUserName',false)"
              :readonly="!hasEditPermission('F_CollectionUserName',false)" clearable
              @focus="selectUser(1)"
              :style="{width: '100%'}"></el-input> -->
              <SelectOneStaff @transmissionData="transmissionData1" />
          </el-form-item>
        </el-col>
        <!-- 收款人部门ID -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('收款人部门ID')" prop="F_CollectionDeptId">

              <el-input v-model="formData['F_CollectionDeptId']" placeholder="请输入收款人部门名称"
                :disabled="hasDisabledPermission('F_CollectionDeptId',false)"
                :readonly="!hasEditPermission('F_CollectionDeptId',false)" clearable
                :style="{width: '100%'}"></el-input>

          </el-form-item>
        </el-col>
        <!-- 收款人部门名称 -->
        <el-col :span="24" >
          <el-form-item :label="$t('收款人部门')" prop="F_CollectionDeptName">
              <el-select
                v-model="formData['F_CollectionDeptName']"
                placeholder="请输入收款人部门名称"
                :style="{ width: '100%' }"
                @change="Handleselect1"
              >
                <el-option
                  v-for="(item, index) in department"
                  :key="index"
                  :label="item.F_FullName"
                  :value="item.F_DepartmentId"
                ></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <!-- 费用发生时间 -->
        <el-col :span="24" >
          <el-form-item :label="$t('费用发生时间')" prop="F_ExpenseTime" v-show="false">
            <el-date-picker :disabled="hasDisabledPermission('F_ExpenseTime',false)"
              :readonly="!hasEditPermission('F_ExpenseTime',false)" v-model="formData['F_ExpenseTime']"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" placeholder="请选择费用发生时间"
              clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 发票号 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('发票号')" prop="F_InvoiceNumber">
            <el-input v-model="formData['F_InvoiceNumber']" placeholder="请输入发票票号"
              :disabled="hasDisabledPermission('F_InvoiceNumber',false)"
              :readonly="!hasEditPermission('F_InvoiceNumber',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 发票附件 -->
        <el-col :span="24" >
          <el-form-item :label="$t('发票附件')" prop="F_Attachment">
            <el-upload action="" multiple ref="fileupload" class="upload-demo"
                :limit="10"
                :on-exceed="onExceed"
                :on-change="fileChange"
                :on-remove="upLoadRemove"
                accept=".png,.jpg,.jpeg,.pdf"
                :http-request="uploadFile1">
              <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
              <el-tooltip class="item" effect="dark" :content="contents" placement="top">
                <el-button style="margin-left: 10px;" size="small" @click="uploadFileAxios">
                  开始识别<i class="el-icon-question el-icon--right"></i>
                </el-button>
              </el-tooltip>
              <div slot="tip" class="el-upload__tip">
                最多可识别10张发票信息<br>
                支持jpg、jpeg、png、pdf类型文件，3M以内
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <!-- 发票详情 -->
        <el-col :span="24">
          <el-form-item :slot="label">
            <el-tooltip class="item marginleft" effect="dark" :content="contents1" placement="top">
              <label> <i class="el-icon-question"></i>智能识别发票内容</label>
            </el-tooltip>
            <div class="table-box">
                <div class="table-header">
                    <div class="table-header-items width100">序号</div>
                    <div class="table-header-items width200"><span class="required">*</span>是否需要验真</div>
                    <div class="table-header-items width200"><span class="required">*</span>验真结果</div>
                    <div class="table-header-items width200"><span class="required">*</span>是否重复</div>
                    <div class="table-header-items width200"><span class="required">*</span>发票代码</div>
                    <div class="table-header-items width200"><span class="required">*</span>发票号码</div>
                    <div class="table-header-items width200"><span class="required">*</span>开票日期</div>
                    <!-- <div class="table-header-items width200"><span class="required">*</span>发票类型</div> -->
                    <div class="table-header-items width200"><span class="required">*</span>发票校验码</div>
                    <div class="table-header-items width200"><span class="required">*</span>发票金额</div>
                    <div class="table-header-items width200">操作</div>
                </div>
                <div class="table-body" v-for="(item,index) in formData.invoiceDetails" :key="index">
                    <div class="table-header-items width100">{{index+1}}</div>
                    
                    <!-- 是否需要验真 -->
                    <div class="table-header-items width200">
                      <div class="textaligncenter needs" v-if="item.need_check == '1'">需要</div>
                      <div class="textaligncenter no-needs" v-else-if="item.need_check =='2'">不需要</div>
                      <div class="textaligncenter" v-else></div>
                    </div>
                    <!-- 验真结果 -->
                    <div class="table-header-items width200" v-if="item.need_check == 1">
                      <div class=" flex_1" v-if="item.check_pass=='1'">
                        <div class="left1">验证通过</div>
                        <div class="right1"><img src="../../../assets/flowlist/effective.png"></div>
                      </div>
                      <div class="flex_1" v-else-if="item.check_pass=='2'">
                        <div class="left1">验证不通过</div>
                        <div class="right1"><img src="../../../assets/flowlist/invalid.png"></div>
                      </div>
                      <div class="flex_1" v-else>
                        <div class="left1"></div>
                        <div class="right1"></div>
                      </div>
                    </div>
                    <div class="table-header-items width200" v-else-if="item.need_check == 2">--</div>
                    <div class="table-header-items width200" v-else></div>
                    <!-- 是否重复（系统内） -->
                    <div class="table-header-items width200">
                      <div class=" flex_1" v-if="item.used=='1'">
                        <div class="left1">重复</div>
                        <div class="right1"><img src="../../../assets/flowlist/repeat.png"></div>
                      </div>
                      <div class="flex_1" v-else-if="item.used=='0'">
                        <div class="left1">不重复</div>
                        <div class="right1"><img src="../../../assets/flowlist/no-repeat.png"></div>
                      </div>
                      <div class="flex_1" v-else>
                        <div class="left1"></div>
                        <div class="right1"></div>
                      </div>
                    </div>
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.invoice_code"></el-input></div>
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.invoice_num"></el-input></div>
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.invoice_date"></el-input></div>
                    <!-- <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.invoice_des"></el-input></div> -->
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.check_code"></el-input></div>
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.total_amount"></el-input></div>
                    <div class="table-header-items width200">
                        <el-link type="danger" @click="delInvoice(index)">删除</el-link>
                    </div>
                </div>
            </div>
          </el-form-item>
        </el-col>
        <!-- 报销金额 -->
        <el-col :span="24">
          <el-form-item :label="$t('报销金额')" prop="F_ExpenseAmount">
            <el-input v-model="formData['F_ExpenseAmount']" type="number" placeholder="请输入报销金额"
              :disabled="hasDisabledPermission('F_ExpenseAmount',false)"
              :readonly="!hasEditPermission('F_ExpenseAmount',false)" clearable :style="{width: '100%'}">
              <template slot="prepend">¥</template>
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 报销金额--流程图判断 -->
        <!-- <el-col :span="24">
          <el-form-item :label="$t('流程图判断金额')">
            <el-input v-model.number="formData['F_ExpenseAmount_Flow']" placeholder="请输入报销金额分"
              clearable :style="{width: '100%'}">
              <template slot="prepend">分</template>
            </el-input>
          </el-form-item>
        </el-col> -->
        <!-- 关联审批单 -->
        <el-col :span="24" >
          <el-form-item :label="$t('关联审批单')">
            <el-input v-model="formData['F_ContractTravelProcessId']" placeholder="请选择关联审批单"
              :disabled="hasDisabledPermission('F_ContractTravelProcessId',false)"
              @focus="handleSetProject"
              :readonly="!hasEditPermission('F_ContractTravelProcessId',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 关联审批单 -->
        <el-col :span="24" v-show="selectData.length > 0">
          <el-form-item label="">
            <div class="del_items" v-for="(item,index) in selectData" :key="index">
              <div class="del-items-left"><img src="../../../assets/card/file.png"></div>
              <div class="del-items-middle">{{item.startUser}}提交的{{item.schemeName}}</div>
              <div class="del-items-refuse" v-if="item.status==0">审批拒绝</div>
              <div class="del-items-adopt" v-else-if="item.status==1">审批通过</div>
              <div class="del-items-processing" v-else>审批中</div>
              <div class="del-items-close" @click="delApproval(item,index)"><img src="../../../assets/card/close.png"></div>
            </div>
          </el-form-item>
        </el-col>
         <!-- 备注 -->
        <el-col :span="24" v-show="false">
          <el-form-item :label="$t('备注')" prop="F_Remark">
            <el-input v-model="formData['F_Remark']" type="textarea" placeholder="请输入备注"
              :disabled="hasDisabledPermission('F_Remark',false)"
              :readonly="!hasEditPermission('F_Remark',false)" :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 意见簿 -->
        <el-col :span="24" v-show="optionsFlag">
          <el-form-item :label="$t('意见簿')" prop="field123eb9d">
            <xjr-opinion-comonent :value="formData.field123eb9d"></xjr-opinion-comonent>
          </el-form-item>
        </el-col>
        <!-- 是否生效 -->
        <el-col :span="24" v-show="false">
          <el-form-item :label="$t('是否生效')" prop="F_IsEffective">
            <el-input v-model="formData['F_IsEffective']" placeholder="是否已经生效"
              :disabled="hasDisabledPermission('F_IsEffective',false)"
              :readonly="!hasEditPermission('F_IsEffective',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 提交按钮 -->
        <el-col :span="24" v-if="!isWorkflowForm">
          <el-form-item size="large" v-if="isEdit">
            <el-button type="primary" @click="submitForm" :loading="submitLoading">
              {{submitLoading?$t('workFlow.WFMenu.hintSubmit'):$t('submit')}}</el-button>
            <el-button @click="cancelForm">{{$t('cancelText')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <!-- 人员选择列表 -->
    <el-dialog
      width="700px"
      title="人员列表"
      :visible.sync="selectUserVisible"
      append-to-body>
      <div class="select_user_body">
        <div class="select_user_body_left">
          <div class="companyInfo">公司部门</div>
          <div v-for="(item,index) in departmentData" :key="index"
              :class="item.F_Ischecked ? 'select_user_body_left_item1':'select_user_body_left_item'"
              @click="selectDepartment(item)">
             {{item.F_FullName}}
          </div>
        </div>
        <div class="select_user_body_right">

          <div class="select_user_body_right_top">
            <div class="select_user_body_right_top_left">已选人员：</div>
            <div class="select_user_body_right_top_right">
              <div class="select_user_body_right_top_right_item" 
                  v-for="(item,index) in filterData" :key="index">
                  <div class="clodesssd1">
                    {{item.F_RealName}}
                  </div>
                  <div class="clodesssd" @click="removeItem(item)">x</div>&nbsp;
                </div>
            </div>
          </div>

          <div class="select_user_body_right_bottom">
            <div class="select_user_body_right_bottom_item" v-for="(item,index) in userListData"
              @click="selectUsers(item)"
              :key="index">
              {{item.F_RealName}}
            </div>
          </div>
        </div>
      </div>
      <div class="select_user_footer">
          <el-button class="el_button_sure" @click="cancleForm" >取消</el-button>
          <el-button class="el_button_sure" @click="sureForm" type="primary" >确定</el-button>
      </div>
    </el-dialog>
    <!-- 关联审批单 -->
    <el-dialog
      append-to-body	
      title="关联审批单"
      :visible.sync="setPeojectDialogVisible"
      width="880px"
      :before-close="handleClose">
      <Approvals ref='approval'/>
      <span slot="footer" class="dialog-footer">
        <div class="height16"></div>
        <el-button @click="setPeojectDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
    import FilterableDataList from '@/components/generator/clientComponents/FilterableDataList.vue';
    import workflowFormAuthorize from "@/mixins/workflowFormAuthorize";
    import authorizeMixin from "@/mixins/authorize";
    import { baseUrl } from "@/config/env";
    import request from "@/router/axios";
    import { v4 as uuidv4 } from "uuid";
    import {distInvoice}from '@/api/user.js';
    import ContractpprovalVs12  from  '../components/contractApprovals12.vue';
    import SelectOneStaff from '@/components/staffSelector/selectOneStaff.vue'
    import {getUserDetailsById,getCUrrentDepartmentUserList} from '@/api/user.js';
    import {getMyTask} from "@/api/workFlow/WFProcess";//我的流程
    import Approvals from '../../financialManagement/components/approvals.vue'
    import { log } from 'video.js';
    export default {
      mixins: [authorizeMixin,workflowFormAuthorize],
      components: {ContractpprovalVs12,Approvals,SelectOneStaff},
      props: ['keyValue', 'isEdit', 'disabled'],
      data() {
        let _this = this
        return {
          selectUserVisible:false,
          userListData:[],
          filterData:[],
          department:[],
          submitLoading: false,
          showForm: true,
          showFormKey: 1,
          reRenderSubform: false,
          operationVal: 'add',
          isAdd: true,
          addressUrl:'travelexpense',
          mainTableName: 'oa_exp_travel',
          formConfig: {},
          contract_travel_process_idOptions: [],
          dcData: [],//单程\往返
          dcData1: [],//交通工具
          formData: {
            'F_Job': '',//职级名称
            'F_Area': '',//地区
            'F_UserId': '',//申请人id
            'F_UserName': '',//申请人名称
            'F_ApplyTime': "",//申请时间
            'F_Department': '',//部门id
            'F_DepartmentName': '',//部门名称
            'F_RoleId': '',//角色id
            'F_RoleName': '',//角色名称
            'F_payment_company':'',//支付公司选择
            'F_ExpenseType': '',//报销类型
            'F_ExpenseAmount': "",//报销金额
            // 'F_ExpenseAmount_Flow':'',//报销金额(分)
            // 'F_ContactUserId': '',//联系人id
            'F_ContactUserName': '',//联系人名称
            // 'F_CollectionUserId': '',//收款人id
            'F_CollectionUserName': '',//收款人名称
            'F_CollectionDeptId': '',//收款人部门id
            'F_CollectionDeptName': '',//收款人部门名称
            'F_ExpenseTime': "",//费用发生时间
            'F_InvoiceNumber': "123321",//发票号
            'F_Attachment': "",//发票附件
            'F_ContractTravelProcessId': '',//关联审批单
            'F_Remark': '备注',//备注
            'field123eb9d': null,
            'F_IsEffective': "0",
            travelDays:'', // 出差天数
            travelAllowance:'',//出差补助            
            // 出差补助
            invoiceDetails:[
              {
                invoice_code:'',//发票代码
                invoice_num:'',//发票号码
                invoice_date:'',//开票日期
                invoice_des:'',//发票类型
                check_code:'',//发票校验码
                total_amount:'',//发票金额
                check_pass:'0',//验证是否通过
                check_result:'',//验证结果
                need_check:'',//是否需要验证
                used:'2',//验重
              }
            ],
            //差旅信息
            'F_OaExpTravelJourneys':[
              {
                'ticket_type':'',//单程、往返
                'origin':'',//出发地
                'destination':'',//目的地
                'departure_time':'',//出发时间
                'arrival_time':'',//到达时间
                // 'travel_day_length':'',//出差时间
                'transport_mode':'',//交通方式
                'transport_cost':0,//交通费用
                'accommodation_cost':0,//住宿费用
                'other_fees':0,//往返费用
              },
            ],
            // 招待费用
            'F_OaExpTravelEntertains':[
              {
                'entertain_object':"",//招待对象
                'our_accompanyPersonal':'',// 我方陪同人员
                'cause_description':'',// 事由说明
              }
            ],
          },
          
          rules: {
            F_Job: [{
              required: true,
              message: '请输入职级名称',
              trigger: 'blur'
            }],
            F_Area: [{
              required: true,
              message: '请输入地区',
              trigger: 'blur'
            }],
            travelAllowance:[{
              required: true,
              message: '出差补助为必填项',
              trigger: 'blur'
            }],
            travelDays:[{
              required: true,
              message: '出差天数为必填项',
              trigger: 'blur'
            }],
            F_UserId: [{
              required: true,
              message: '请选择申请人ID',
              trigger: 'change'
            }],
            F_ContactUserName:[{
              required: true,
              message: '请输入联系人名称',
              trigger: 'blur'
            }],
            F_UserName: [{
              required: true,
              message: '请输入申请人',
              trigger: 'blur'
            }],
            F_ApplyTime: [{
              required: true,
              message: '请选择申请时间',
              trigger: 'change'
            }],
            F_Department: [{
              required: true,
              message: '系统默认(公司)部门ID',
              trigger: 'change'
            }],
            F_DepartmentName: [{
              required: true,
              message: '请输入部门名称',
              trigger: 'blur'
            }],
            F_payment_company:[{
              required: true,
              message: '请选择支付公司',
              trigger: 'blur'
            }],
            F_RoleId: [{
              required: true,
              message: '请选择角色ID',
              trigger: 'change'
            }],
            F_RoleName: [{
              required: true,
              message: '请输入角色名称',
              trigger: 'blur'
            }],
            F_ExpenseType: [{
              required: true,
              message: '请选择报销类型',
              trigger: 'change'
            }],
            F_ExpenseAmount: [{
              required: true,
              message: '请输入报销金额',
              trigger: 'blur'
            }],
            // F_CollectionUserId: [{
            //   required: true,
            //   message: '请选择联系人ID',
            //   trigger: 'change'
            // }],
            F_ContactUserName: [{
              required: true,
              message: '请输入联系人',
              trigger: 'blur'
            }],
            // F_CollectionUserId: [{
            //   required: true,
            //   message: '请选择收款人ID',
            //   trigger: 'change'
            // }],
            F_CollectionUserName: [{
              required: true,
              message: '请输入收款人',
              trigger: 'blur'
            }],
            F_CollectionDeptId: [],
            F_CollectionDeptName: [{
              required: true,
              message: '请输入收款人部门名称',
              trigger: 'blur'
            }],
            F_InvoiceNumber: [{
              required: false,
              message: '请输入发票票号',
              trigger: 'blur'
            }],
            F_Attachment: [{
              required: true,
              message: '发票附件不能为空',
              trigger: 'change'
            }],
            F_ContractTravelProcessId: [],
            F_ExpenseTime: [{
              required: false,
              message: '请选择费用发生时间',
              trigger: 'change'
            }],
            F_Remark: [{
              required: true,
              message: '请输入备注',
              trigger: 'blur'
            }],
            F_IsEffective: [],
          },
          user_idOptions: undefined,
          dept_idOptions: undefined,
          expense_typeOptions: [],
          contact_user_idOptions: undefined,
          collection_user_idOptions: undefined,
          collection_dept_idOptions: undefined,
          paymentCompany_typeOptions:[],
          attachmentConfig: {
            "showTip": true,
            "fileSize": 4,
            "sizeUnit": "MB",
            "buttonText": "点击上传",
            "disabled": false
          },
          departmentData:[],//部门信息
          roleData:[],//角色信息
          travelTypeFlag1:false,
          travelTypeFlag2:false,
          setPeojectDialogVisible:false,
          contents:'点击开始识别，系统将自动进行发票识别，并将识别的结果统计到发票内容的表格中',
          contents1:'由于文件清晰度不同，可能会存在部分发票无法识别的情况，该识别结果仅供参考',
          loadings1:false,
          fileList:[],
          selectData:[],
          showFlag:false,
          invoiceDataType:['png','jpg','jpeg','pdf']
        }
      },
      computed: {
        totalCost(){
          let transportCost = 0//交通费用
          let accommodationCost = 0//住宿费用
          let otherFees = 0//公共交通/打车费
          
          if(this.formData['F_OaExpTravelJourneys'] && this.formData['F_OaExpTravelJourneys'].length > 0){
            this.formData['F_OaExpTravelJourneys'].forEach(e=>{
              if(e.transport_cost > 0){
                transportCost += e.transport_cost
              }
              if(e.accommodation_cost > 0){
                accommodationCost += e.accommodation_cost
              }
              if(e.other_fees > 0){
                otherFees += e.other_fees
              }
            })
          }
          let result = {
            transportCost,
            accommodationCost,
            otherFees
          }
          return result
        }
      },
      watch: {
        'formData.F_ExpenseAmount': function(val) {
          this.changeFormConfigDefaultValue();
        },
        'formData.travelDays':function(val){
          this.formData['travelAllowance'] = val*100
        }
      },
      created() {
        this.formConfig = this.getFormConfig();
      },
      async mounted() {
        //TODO   再这里做数据回填 请求表单数据
        if(this.keyValue){
            this.isAdd = false;
        }
        if(!this.isAdd&&this.keyValue){
          this.operationVal = 'edit';
          try {
            let res = await request({
              url: baseUrl + "/"+this.addressUrl+"/" + this.keyValue,
              method: "get",
            });
            this.formData = res.data.data
            this.showFormKey++;
          } catch (error) {}
        }
        if (typeof this.getDept_idOptions == "function") {
          await this.getDept_idOptions();
        }
        if (typeof this.getPaymentCompany_idOptions == "function") {
          await this.getPaymentCompany_idOptions();
        }
        if (typeof this.getExpense_typeOptions == "function") {
          await this.getExpense_typeOptions();
        }
        if (typeof this.getCollection_dept_idOptions == "function") {
          await this.getCollection_dept_idOptions();
        }
        await this.getCollection_vdhicle_type();
        await this.getCollection_ticket_type();
        //获取用户详情
        this.getCurrentInfo()
        this.initOther()
        this.selectType()
      },
      methods: {
        sure(v){
          if(v=='del'){
            this.formData['F_ContractTravelProcessId'] = ''
          }
          this.$refs.approval.historyTaskData = this.$refs.approval.historyTaskData.filter(e => e.isChecked)
          this.$refs.approval.myTaskData = this.$refs.approval.myTaskData.filter(e => e.isChecked)
          this.$refs.approval.manualTaskData = this.$refs.approval.manualTaskData.filter(e => e.isChecked)
          if(this.$refs.approval.historyTaskData && this.$refs.approval.historyTaskData.length > 0){
            this.$refs.approval.historyTaskData.forEach(element => {
              this.formData['F_ContractTravelProcessId'] = element.processInstanceId + ','
            })
          }
          if(this.$refs.approval.myTaskData && this.$refs.approval.myTaskData.length > 0){
            this.$refs.approval.myTaskData.forEach(element => {
              this.formData['F_ContractTravelProcessId'] = element.processInstanceId + ','
            })
          }
          if(this.$refs.approval.manualTaskData && this.$refs.approval.manualTaskData.length > 0){
            this.$refs.approval.manualTaskData.forEach(element => {
              this.formData['F_ContractTravelProcessId'] = element.processInstanceId + ','
            })
          }
          this.selectData = [...this.$refs.approval.historyTaskData,...this.$refs.approval.myTaskData,...this.$refs.approval.manualTaskData]
          this.setPeojectDialogVisible = false
        },
        delApproval(item,index){
          if(this.$refs.approval.historyTaskData.includes(item)){
            this.$refs.approval.historyTaskData.forEach((e,i) => {
              if(e == item){
                this.$refs.approval.historyTaskData.splice(i,1)
              }
            })
          }
          if(this.$refs.approval.myTaskData.includes(item)){
            this.$refs.approval.myTaskData.forEach((e,i) => {
              if(e == item){
                this.$refs.approval.myTaskData.splice(i,1)
              }
            })
          }
          if(this.$refs.approval.manualTaskData.includes(item)){
            this.$refs.approval.manualTaskData.forEach((e,i) => {
              if(e == item){
                this.$refs.approval.manualTaskData.splice(i,1)
              }
            })
          }
          this.sure('del')
        },
        delInvoice(index){
          this.formData.invoiceDetails.splice(index,1)
        },
        uploadFileAxios(){
            this.loadings1 = true
            let _this = this
            this.folderId = uuidv4()
            var form = new FormData();//new一个表单对象
            if(this.fileList && this.fileList.length > 0){
              this.fileList.forEach(e =>{
                form.append("file",e.raw)
              })
              axios({
                method: 'post',
                url:`${baseUrl}/upload/oss/${_this.folderId}/batch`,
                headers: {'Content-Type': 'multipart/form-data'},
                data:form
              }).then(res => {
                if(res.data && res.data.success){
                  this.analysis(res.data.data)
                }
              })
            }else{
              this.loadings1 = false
              this.$message.warning("请先上传发票")
            }
        },
        analysis(files){
          let data = []
          this.formData['F_Attachment'] = this.folderId
          let result
          if(files && files.length > 0){
            files.forEach(e=>{
              data.push(e.fileId)
            })
          }
          distInvoice(data).then(res => {
            if(res.data && res.data.success){
              this.loadings1 = false
              if(res.data.data){
                this.formData['F_ExpenseAmount'] = res.data.data.total_amount
                this.formData.invoiceDetails = res.data.data.list
              }
            }else{
              this.loadings1 = false
            }
          })
        },
        upLoadRemove(file) {
            let tempFileList = []
            for (var index = 0; index < this.fileList.length; index++) {
              if (this.fileList[index].name !== file.name) {
                tempFileList.push(this.fileList[index])
              }
            }
            this.fileList = tempFileList
        },

        fileChange(file){
          //先判断文件类型
          if(file && file.raw){
            let type = file.raw.type.split('/')[1]
            if(this.invoiceDataType.includes(type)){
              console.log('包含');
            }else{
              console.log('不包含');
            }
          }

          if(this.fileList.indexOf(file) == -1){
            this.fileList.push(file);
          }
          return false;
        },
        
        onExceed(){
          this.$message.warning("最多只能上传10张发票")
        },
        uploadFile1(){},
        handleSetProject(){
          this.setPeojectDialogVisible = true
          this.$nextTick(()=>{
            this.$refs.approval.init()
          })
          
        },
        selectType(){
          let params = {
            limit: 1,
            size: 10,
            order: 'desc',
            approvalType:"请假",//审批类型
          }
          getMyTask(params).then(res => {
            if(res.data.success){
              this.contract_travel_process_idOptions = res.data.data.Rows
            }
          })
        },
        initOther(){
          //差旅
          if(this.formData.F_OaExpTravelJourneys && this.formData.F_OaExpTravelJourneys.length > 0){
            this.travelTypeFlag1 = true
            this.travelTypeFlag2 = false
          }
          if(this.formData.F_OaExpTravelEntertains && this.formData.F_OaExpTravelEntertains.length > 0){//招待
            this.travelTypeFlag1 = false
            this.travelTypeFlag2 = true
          }
        },
        selectBXLX(){
          if(this.formData['F_ExpenseType'] == 1){
            this.travelTypeFlag1 = true
            this.travelTypeFlag2 = false
          }else if(this.formData['F_ExpenseType'] == 2){
            this.travelTypeFlag1 = false
            this.travelTypeFlag2 = true
          }else{
            this.travelTypeFlag1 = this.travelTypeFlag2 = false
          }
        },
        addItems1(){
          this.formData['F_OaExpTravelEntertains'].push({
            'entertain_object':"",//招待对象
            'our_accompanyPersonal':'',// 我方陪同人员
            'cause_description':'',// 事由说明
          })
        },
        addItems(){
          this.formData['F_OaExpTravelJourneys'].push({
            'ticket_type':'',//单程、往返
            'origin':'',//出发地
            'destination':'',//目的地
            'departure_time':'',//出发时间
            'arrival_time':'',//到达时间
            // 'travel_day_length':'',//出差时间
            'transport_mode':'',//交通方式
            'transport_cost':0,//交通费用
            'accommodation_cost':0,//住宿费用
            'other_fees':0,//往返费用
          })
        },
        delItems(item,index){
          this.formData['F_OaExpTravelJourneys'].splice(index,1)
        },
        delItems1(item,index){
          this.formData['F_OaExpTravelEntertains'].splice(index,1)
        },
        cancleForm(){
          this.selectUserVisible = false
        },
        selectUser(v){
          this.v = v
          this.selectUserVisible = true
          if(this.departmentData && this.departmentData.length > 0){
            this.departmentData.forEach(e=>{
              e.F_Ischecked = false
            })
              this.departmentData[0].F_Ischecked = true
          }
          this.departmentData = [...this.departmentData]
          //根据用户部门id获取部门所有员工信息
          getCUrrentDepartmentUserList(this.departmentData[0].F_DepartmentId).then(res => {
            if(res.data.success){
              this.userListData = res.data.data
            }
          })

        },
        selectUsers(item){
          this.filterData = []
          this.filterData.push(item)
        },
        removeItem(item){
          this.filterData = []
        },
        selectDepartment(item){
          this.departmentData.forEach(e =>{
            e.F_Ischecked = false
          })
          item.F_Ischecked = true
          getCUrrentDepartmentUserList(item.F_DepartmentId).then(res => {
            if(res.data.success){
              this.userListData = res.data.data
            }
          })

          this.departmentData = [...this.departmentData]
        },
        sureForm(){
          this.selectUserVisible = false
          //1代表联系人
          if(this.v == 1){
            this.formData['F_CollectionUserId'] = this.filterData[0].F_UserId 
            this.formData['F_CollectionUserName'] = this.filterData[0].F_RealName 
            let params = {
              userId:this.formData['F_CollectionUserId']
            }
            //根据收款人的id查询收款人的姓名
            getUserDetailsById(params).then(res => {
              if(res.data.success){
                this.department = res.data.data.F_Department
              }
            })
          }else{
            this.formData['F_ContactUserId'] = this.filterData[0].F_UserId 
            this.formData['F_ContactUserName'] = this.filterData[0].F_RealName 
          }

        },
        Handleselect1(){
          if(this.department && this.department.length > 0){
            this.department.forEach(e => {
              if(e.F_DepartmentId == this.formData['F_CollectionDeptName']){
                this.formData['F_CollectionDeptId'] = e.F_ShortName
              }
            })
          }
        },
        getCurrentInfo(){
            let params
            if(this.formData.F_UserId){
              params = {
                userId:this.formData.F_UserId
              }
            }else{
              params = {
                userId:this.$store.state.user.userInfo.F_UserId
              }
            }
            getUserDetailsById(params).then(res => {
              this.formData['F_UserId'] = res.data.data.F_UserId//当前申请人id
              this.formData['F_UserName'] = res.data.data.F_RealName//当前申请人姓名
              this.formData['F_Area'] = res.data.data.F_Area//地区
              this.formData['F_Job'] = res.data.data.F_Job//职级
              this.departmentData = res.data.data.F_Department//部门信息
              this.roleData = res.data.data.F_Role//角色信息
              this.initRole()
              this.initDepartmentData()
            })
        },
        initDepartmentData(){
        if(this.departmentData && this.departmentData.length == 1){
          this.formData['F_DepartmentName'] = this.departmentData[0].F_FullName
          this.formData['F_Department'] = this.departmentData[0].F_DepartmentId
        }
      },
      transmissionData(value){
        this.formData['F_ContactUserName'] = value
      },
      transmissionData1(value){
          this.formData['F_CollectionUserName'] = value
          //根据收款人的id查询收款人的姓名
          let params = {
            userId:value
          }
          getUserDetailsById(params).then(res => {
            if(res.data.success){
              this.department = res.data.data.F_Department
            }
          })
          //调用查询部门
        }, 
        initRole(){
            let roleId = []
            let roleName = []
            if(this.roleData && this.roleData.length > 0){
              this.roleData.forEach(e => {
                roleId.push(e.F_RoleId)
                roleName.push(e.F_FullName)
              })
            }
            this.formData['F_RoleId'] = roleId.join(',')
            this.formData['F_RoleName'] = roleName.join(',')
            this.formData['F_ApplyTime'] = this.getTime()
        },
        getTime(){
          let today = new Date()
          let year = today.getFullYear();
          let month = today.getMonth() + 1;//获取月份，值为0-11 表示1-12月份
          if(month <= 9){
              month = "0"+month
          }
          let date = today.getDate();
          if(date <= 9){
              date = "0" + date
          }
          let hours = today.getHours();
          if(hours <= 9){
              hours = "0" + hours
          }
          let minutes = today.getMinutes()
          if(minutes <= 9){
              minutes = "0" + minutes
          }
          let seconds = today.getSeconds();
          if(seconds <= 9){
              seconds = "0" + seconds
          }
          let time = year +"-" + month +"-" + date +" "+ hours +":"+ minutes +":"+ seconds
          return time
        },
        Handleselect(){
          if(this.departmentData && this.departmentData.length > 0){
            this.departmentData.forEach(e => {
              if(e.F_DepartmentId == this.formData['F_Department']){
                this.formData['F_DepartmentName'] = e.F_ShortName
              }
            })
          }
        },
        getFormData() {
          let key = this.mainTableName + 'Entity';
          let returnParams = {};
          returnParams[key] = this.formData;
          return {
            ...returnParams,
          };
        },
        validateForm() {
          this.$refs['elForm'].validate(valid => {});
        },
        async aysncValidateForm() {
          let validataArry = []
          validataArry.push(new Promise((resolve, reject) => {
            this.$refs['elForm'].validate(valid => {
              resolve(valid)
            })
          }))
          let res = await Promise.all(validataArry)
          if (res.includes(false)) {
            return false
          }
          else {
            return true;
          }
        },
        changeTableData() {},
        async submitForm() {
          this.submitLoading = true;
          let valid = await this.aysncValidateForm();
          if (valid == false) {
            this.submitLoading = false;
            return false;
          }
          this.changeTableData();
          //格式化数据
          let newObj = this.getFormData();
          
            //如果没有传入参数就是新增
            if (!this.keyValue) {

              request({
                url: baseUrl + "/"+this.addressUrl,
                method: "post",
                data : newObj
              }).then((res) => {
                this.submitLoading = false;
                this.$notify({
                  title: "成功",
                  message: "新增成功",
                  type: "success",
                });
                this.$emit("onChange",true)
              });
            } else{
            request({
                url: baseUrl + "/"+this.addressUrl+"/" + this.keyValue,
                method: "put",
                data : newObj
              }).then((res) => {
                this.submitLoading = false;
                this.$notify({
                  title: "成功",
                  message: "修改成功",
                  type: "success",
                });
                this.$emit("onChange",true)
              });
            } 
        },
        cancelForm() {
          this.$emit("onChange", true)
        },
        formatTree(data, valueField, lableField, childField, type) {
          let tree = [];
          data.forEach((node, index) => {
            let newNode = {
              value: node[valueField],
              label: node[lableField],
            };
            if (type) {
              newNode.disabled = node[valueField] == undefined ? true : false
            }
            tree.push(newNode);
            if (node[childField] != null && node[childField].length > 0) {
              newNode.children = (this.formatTree(node[childField], valueField, lableField, childField,
              type));
            }
          }, this);
          return tree;
        },
        //辅助工作流 审批(编辑) 预留方法
        handleEdit() {
        },
        getNumberFixed2(number) {
          let splitNum = ("" + number).replace(/(^0*)/g, "").split(".");
          let num = splitNum[0] == "" ? '0' : splitNum[0];
          if (splitNum.length > 1) {
            num += '.';
            let roundNum = 2; //保留两位小数
            for (let i = 0; i < roundNum; i++) {
              num += splitNum[1][i];
            }
          }
          return parseFloat(num);
        },
        changeFormConfigDefaultValue() {
          let valueForFormIdMap = new Map();
          this.formConfig.fields.forEach((ele) => {
            if (ele.__config__.componentName == "table") {
              ele.__config__.children.forEach((element) => {
                valueForFormIdMap.set(ele.__config__.formId + "-table-" + element.__config__.formId,
                  element.__config__.defaultValue);
              });
            }
            else if (ele.__config__.componentName && ele.__config__.componentName == 'avue-tabs') {
              let childrenObj = ele.__config__.childrenObj || {};
              let _arr = this.getValByTabs(childrenObj);
              _arr.map(item => {
                valueForFormIdMap.set(item.formId, item.defaultValue);
              });
            }
            else {
              valueForFormIdMap.set(ele.__config__.formId, this.formData[ele.__vModel__]);
            }
          });
          this.formConfig.fields.forEach((ele, index) => {
            if (ele.__config__.componentName == "table") {
              ele.__config__.children.forEach((element, childrenIndex) => {
                let defaultValue = 0;
                if (element.computationalConfiguration && element.computationalConfiguration.length > 0) {
                  let formulaStr = "";
                  element.computationalConfiguration.forEach((item) => {
                    if (item.type == "taxRate") {
                      //税率
                      if (element.taxRate >= 0) {
                        formulaStr += element.taxRate * 0.01;
                      }
                    }
                    else {
                      let eleValue = valueForFormIdMap.get(item.formId) || 0;
                      formulaStr += item.formId == 0 ? item.name : eleValue;
                    }
                  });
                  defaultValue = eval(formulaStr);
                  defaultValue = this.getNumberFixed2(defaultValue);
                  //大写
                  if (element.isCapitalized) {
                    this.formConfig.fields[index].__config__.children[childrenIndex].__config__
                      .capitalizedValue = this.getCapitalizedMethod(defaultValue);
                  }
                  this.formConfig.fields[index].__config__.children[childrenIndex].__config__
                    .defaultValue = defaultValue;
                  this.formData[element.__vModel__] = defaultValue;
                }
              });
            }
            else if (ele.__config__.componentName && ele.__config__.componentName == 'avue-tabs') {
              let childrenObj = ele.__config__.childrenObj || {};
              //avue-tabs
              this.calcDefaultValueByTabs(ele.__config__.childrenObj, valueForFormIdMap);
            }
            else {
              let defaultValue = 0;
              if (ele.computationalConfiguration && ele.computationalConfiguration.length > 0) {
                let formulaStr = "";
                ele.computationalConfiguration.forEach((item) => {
                  if (item.type == "taxRate") {
                    //税率
                    if (ele.taxRate >= 0) {
                      formulaStr += ele.taxRate * 0.01;
                    }
                  }
                  else {
                    let eleValue = valueForFormIdMap.get(item.formId) || 0;
                    formulaStr += item.formId == 0 ? item.name : eleValue;
                  }
                });
                defaultValue = eval(formulaStr);
                defaultValue = this.getNumberFixed2(defaultValue);
                //大写
                if (ele.isCapitalized) {
                  this.formConfig.fields[index].__config__.capitalizedValue = this.getCapitalizedMethod(
                    defaultValue);
                }
                this.formConfig.fields[index].__config__.defaultValue = defaultValue;
                this.formData[ele.__vModel__] = defaultValue;
              }
            }
          });
        },
        getValByTabs(childrenObj) {
          let _arr = [];
          if (!childrenObj || !(childrenObj instanceof Object)) return [];
          for (let key in childrenObj) {
            let children = childrenObj[key];
            children.map(item => {
              if (item.__config__.componentName && item.__config__.componentName == 'avue-tabs') {
                let cObj = item.__config__.childrenObj || {};
                _arr.push(...this.getValByTabs(item.__config__.childrenObj));
              }
              else {
                let _obj = {};
                _obj.formId = item.__config__.formId;
                _obj.defaultValue = this.formData[item.__vModel__];
                _arr.push(_obj);
              }
            });
          }
          return (() => {
            return _arr;
          })()
        },
        calcDefaultValueByTabs(childrenObj, valueForFormIdMap) {
          if (!childrenObj || !(childrenObj instanceof Object)) return;
          for (let key in childrenObj) {
            let children = childrenObj[key];
            children.map(item => {
              if (item.__config__.componentName && item.__config__.componentName == 'avue-tabs') {
                let cObj = item.__config__.childrenObj || {};
                this.calcDefaultValueByTabs(cObj, valueForFormIdMap);
              }
              else {
                let defaultValue = 0;
                if (item.computationalConfiguration && item.computationalConfiguration.length > 0) {
                  let formulaStr = "";
                  item.computationalConfiguration.forEach((c) => {
                    if (item.type == "taxRate") {
                      //税率
                      if (item.taxRate >= 0) {
                        formulaStr += item.taxRate * 0.01;
                      }
                    }
                    else {
                      let eleValue = valueForFormIdMap.get(c.formId) || 0;
                      formulaStr += c.formId == 0 ? c.name : eleValue;
                    }
                  });
                  defaultValue = eval(formulaStr);
                  defaultValue = this.getNumberFixed2(defaultValue);
                  item.__config__.defaultValue = defaultValue;
                  this.formData[item.__vModel__] = defaultValue;
                }
              }
            });
          }
        },
        async getDept_idOptions() {
          // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
          try {
            let resp = await this.$axios({
              method: 'get',
              url:  baseUrl + '/companies/departments/tree',
            });
            if (resp.data) {
              let {
                data
              } = resp.data
              this.dept_idOptions = this.formatTree(data, 'F_DepartmentId', 'F_FullName', 'children', 1);
            }
          }
          catch (error) {}
        },
        async getPaymentCompany_idOptions() {
          // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
          try {
            let resp = await this.$axios({
              method: 'get',
              url:  baseUrl + '/data-items/zm-payment-company/detail',
            });
            if (resp.data.data) {
              this.paymentCompany_typeOptions = resp.data.data;
            }
          }
          catch (error) {}
        },
        async getExpense_typeOptions() {
          // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
          try {
            let resp = await this.$axios({
              method: 'get',
              url:  baseUrl + '/data-items/clbx/detail',
            });
            if (resp.data.data) {
              this.expense_typeOptions = resp.data.data;
            }
          }
          catch (error) {}
        },
        async getCollection_ticket_type(){
          try {
            let resp = await this.$axios({
              method: 'get',
              url:  baseUrl + '/data-items/one_way/detail',
            });
            if (resp.data.data) {
              this.dcData = resp.data.data;
            }
          }catch (error) {}
        },
        async getCollection_vdhicle_type(){
          try {
            let resp = await this.$axios({
              method: 'get',
              url:  baseUrl + '/data-items/vdhicle_type/detail',
            });
            if (resp.data.data) {
              this.dcData1 = resp.data.data;
            }
          }catch (error) {}
        },
        async getCollection_dept_idOptions() {
          // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
          try {
            let resp = await this.$axios({
              method: 'get',
              url:  baseUrl + '/companies/departments/tree',
            });
            if (resp.data) {
              let {
                data
              } = resp.data
              this.collection_dept_idOptions = this.formatTree(data, 'F_DepartmentId', 'F_FullName', 'children',
                1);
            }
          }
          catch (error) {}
        },
        //子表单权限
        getAuthorityTableChildrenList(bindTable, children) {
          let column = [];
          if (bindTable && this.formEnCodeList && this.formEnCodeList[bindTable]) {
            let formSubEnCodeList = this.formEnCodeList[bindTable];
            if (children && children.length > 0) {
              column = children.map(ele2 => {
                if (formSubEnCodeList.includes(ele2.prop)) {
                  ele2.hide = false;
                }
                else {
                  ele2.hide = true;
                }
                if (ele2.hide == false) {
                  //工作流中系统表单必填权限
                  if (this.formSubTableNotRequiredList[bindTable] != undefined) {
                    if (this.formSubTableNotRequiredList[bindTable].includes(ele2.prop)) {
                      ele2.required = false;
                    }
                    else {
                      ele2.required = true;
                    }
                  }
                  ele2.rules = [];
                  if (ele2.required) {
                    ele2.rules = ele2.ruleList;
                  }
                  // disabled 属性
                  if (this.formSubTableDisabledList[bindTable] != undefined) {
                    if (this.formSubTableDisabledList[bindTable].includes(ele2.prop)) {
                      ele2.disabled = true;
                    }
                    else {
                      ele2.disabled = false;
                    }
                  }
                }
                return ele2;
              });
            }
            return column;
          }
          else {
            return children;
          }
        },
        getFormConfig() {
          let config = {
            "fields": [
              //职级名称
              {
              "__vModel__": "F_Job",
              "__config__": {
                "label": "职级名称",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 101,
                "fieldLength": "100",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_Job",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 地区
            {
              "__vModel__": "F_Area",
              "__config__": {
                "label": "地区",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 104,
                "fieldLength": "255",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_Area",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 申请人ID
            {
              "__vModel__": "F_UserId",
              "__type__": "user",
              "__organize__": true,
              "suffix-icon": "el-icon-setting",
              "__config__": {
                "label": "申请人ID",
                "showLabel": true,
                "tag": "xjr-select-user",
                "saveValue": "",
                "required": true,
                "span": 24,
                "bindTableField": "F_UserId",
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 102,
                "fieldLength": "50",
                "bindTable": "oa_exp_travel",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 申请人名称
            {
              "__vModel__": "F_UserName",
              "__config__": {
                "label": "申请人名称",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 103,
                "fieldLength": "100",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_UserName",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 申请时间
            {
              "tempType": "date",
              "__vModel__": "F_ApplyTime",
              "__config__": {
                "label": "申请时间",
                "tag": "el-date-picker",
                "avueType": "datetime",
                "defaultValue": null,
                "showLabel": true,
                "span": 24,
                "required": true,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 105,
                "fieldLength": "",
                "bindTableFieldType": "datetime",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_ApplyTime"
              }
            }, 
            // 部门ID
            {
              "tempType": "tree",
              "__vModel__": "F_Department",
              "__type__": "department",
              "__organize__": true,
              "__config__": {
                "label": "部门",
                "showLabel": true,
                "required": true,
                "tag": "avue-input-tree",
                "dataKey": "data",
                "span": 24,
                "bindTableField": "F_Department",
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 106,
                "fieldLength": "50",
                "bindTable": "oa_exp_travel",
                "bindTableFieldType": "varchar"
              }
            }, 
            // F_payment_company
            //支付公司
            {
              "__vModel__": "F_payment_company",
              "__config__": {
                "label": "支付公司",
                "showLabel": true,
                "required": false,
                "tag": "avue-input-tree",
                "dataKey": "data",
                "span": 24,
                "bindTableField": "F_payment_company",
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 142,
                "fieldLength": "50",
                "bindTable": "oa_exp_travel",
                "bindTableFieldType": "varchar"
              }
            },
            // 部门名称
            {
              "__vModel__": "F_DepartmentName",
              "__config__": {
                "label": "部门名称",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 107,
                "fieldLength": "100",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_DepartmentName",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 角色ID
            {
              "__vModel__": "F_RoleId",
              "__config__": {
                "label": "角色",
                "showLabel": true,
                "tag": "el-select",
                "avueType": "select",
                "span": 24,
                "required": true,
                "saveField": "",
                "showField": "",
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 108,
                "fieldLength": "50",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_RoleId",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 角色名称
            {
              "__vModel__": "F_RoleName",
              "__config__": {
                "label": "角色名称",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 109,
                "fieldLength": "100",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_RoleName",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 报销类型
            {
              "__vModel__": "F_ExpenseType",
              "__config__": {
                "label": "报销类型",
                "showLabel": true,
                "tag": "el-select",
                "avueType": "select",
                "span": 24,
                "required": true,
                "saveField": "",
                "showField": "",
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 110,
                "dataType": "dataItem",
                "dataItem": "clbx",
                "fieldLength": "50",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_ExpenseType",
                "bindTableFieldType": "varchar"
              }
            },
            // 报销金额
            {
              "tempType": "number",
              "__vModel__": "F_ExpenseAmount",
              "computationalConfiguration": [],
              "prepend": "¥",
              "__config__": {
                "label": "报销金额",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input",
                "defaultValue": "",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 113,
                "fieldLength": "100",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_ExpenseAmount",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 联系人ID
            // {
            //   "__vModel__": "F_ContactUserId",
            //   "__type__": "user",
            //   "__organize__": true,
            //   "suffix-icon": "el-icon-setting",
            //   "__config__": {
            //     "label": "联系人ID",
            //     "showLabel": true,
            //     "tag": "xjr-select-user",
            //     "saveValue": "",
            //     "required": true,
            //     "span": 24,
            //     "bindTableField": "F_ContactUserId",
            //     "F_LgMarkCode": "",
            //     "prestrainField": "",
            //     "formId": 111,
            //     "fieldLength": "50",
            //     "bindTable": "oa_exp_travel",
            //     "bindTableFieldType": "varchar"
            //   }
            // }, 
            // 联系人名称
            {
              "__vModel__": "F_ContactUserName",
              "__config__": {
                "label": "联系人名称",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 112,
                "fieldLength": "100",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_ContactUserName",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 收款人ID
            // {
            //   "__vModel__": "F_CollectionUserId",
            //   "__type__": "user",
            //   "__organize__": true,
            //   "suffix-icon": "el-icon-setting",
            //   "__config__": {
            //     "label": "收款人ID",
            //     "showLabel": true,
            //     "tag": "xjr-select-user",
            //     "saveValue": "",
            //     "required": true,
            //     "span": 24,
            //     "bindTableField": "F_CollectionUserId",
            //     "F_LgMarkCode": "",
            //     "prestrainField": "",
            //     "formId": 114,
            //     "fieldLength": "50",
            //     "bindTable": "oa_exp_travel",
            //     "bindTableFieldType": "varchar"
            //   }
            // }, 
            // 收款人
            {
              "__vModel__": "F_CollectionUserName",
              "__config__": {
                "label": "收款人",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 115,
                "fieldLength": "100",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_CollectionUserName",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 收款人部门ID
            {
              "tempType": "tree",
              "__vModel__": "F_CollectionDeptId",
              "__type__": "department",
              "__organize__": true,
              "__config__": {
                "label": "收款人部门ID",
                "showLabel": true,
                "required": false,
                "tag": "avue-input-tree",
                "dataKey": "data",
                "span": 24,
                "bindTableField": "F_CollectionDeptId",
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 118,
                "fieldLength": "50",
                "bindTable": "oa_exp_travel",
                "bindTableFieldType": "varchar"
              }
            },
            // 收款人部门名称
            {
              "__vModel__": "F_CollectionDeptName",
              "__config__": {
                "label": "收款人部门名称",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 119,
                "fieldLength": "100",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_CollectionDeptName",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 发票票号
            {
              "__vModel__": "F_InvoiceNumber",
              "__config__": {
                "label": "发票票号",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "defaultValue": "a",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 116,
                "fieldLength": 500,
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_InvoiceNumber",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 发票附件
            {
              "__vModel__": "F_Attachment",
              "__config__": {
                "label": "发票附件",
                "tag": "el-upload",
                "avueType": "upload",
                "defaultValue": null,
                "showLabel": true,
                "required": true,
                "span": 24,
                "showTip": true,
                "buttonText": "点击上传",
                "fileSize": 4,
                "sizeUnit": "MB",
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 117,
                "fieldLength": 2000,
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_Attachment",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 关联审批单
            {
              "__vModel__": "F_ContractTravelProcessId",
              "__config__": {
                "label": "关联审批单",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "required": false,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 120,
                "fieldLength": "50",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_ContractTravelProcessId",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 费用发生时间
            {
              "tempType": "date",
              "__vModel__": "F_ExpenseTime",
              "__config__": {
                "label": "费用发生时间",
                "tag": "el-date-picker",
                "avueType": "datetime",
                "defaultValue": null,
                "showLabel": true,
                "span": 24,
                "required": true,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 121,
                "fieldLength": "",
                "bindTableFieldType": "datetime",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_ExpenseTime"
              }
            }, 
            // 备注
            {
              "tempType": "textarea",
              "__vModel__": "F_Remark",
              "__config__": {
                "label": "备注",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "textarea",
                "required": true,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 122,
                "fieldLength": 2000,
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_Remark",
                "bindTableFieldType": "varchar"
              }
            }, 
            // 意见簿
            {
              "tempType": "textarea",
              "__vModel__": "field123eb9d",
              "__type__": "opinion",
              "__config__": {
                "label": "意见簿",
                "showLabel": true,
                "tag": "xjr-opinion-comonent",
                "defaultValue": null,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 123
              }
            }, 
            // 是否生效
            {
              "__vModel__": "F_IsEffective",
              "__config__": {
                "label": "是否生效",
                "showLabel": true,
                "tag": "el-input",
                "avueType": "input-tip",
                "defaultValue": "否",
                "required": false,
                "span": 24,
                "F_LgMarkCode": "",
                "prestrainField": "",
                "formId": 124,
                "fieldLength": "10",
                "bindTable": "oa_exp_travel",
                "bindTableField": "F_IsEffective",
                "bindTableFieldType": "varchar"
              }
            }]
          };
          return config;
        },
      }
    }
</script>

<style>
.el-table__empty-block {
  width: 100% !important;
}

.avue-form__row {
  padding: 0 !important;
}

#editorphone {
  width: 375px;
  margin: 0 auto;
  border: 1px solid #E4E7ED;
  padding: 0 7.5px;
  background: #f5f6fa;
  height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 5px;
}

#editorphone .el-col {
  border-bottom: 1px solid #F2F2F2;
  background: #fff;
  margin-bottom: 0;
  padding: 0 15px 6px !important;
  width: 100%;
}

#editorphone .el-form-item__label {
  line-height: 20px
}

#editorphone .el-input-group .el-input__inner {
  background: #f5f6fa
}

#editorphone .el-input__inner {
  border: 0
}

#editorphone .el-input-group__append,
#editorphone .el-input-group__prepend {
  border: 0;
  background: #edeef2;
  color: #666;
}

#editorphone .el-input-group .el-input__prefix {
  left: 44px
}

#editorphone .el-input-group .el-input__suffix {
  right: 44px
}

#editorphone .el-form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: wrap;
}

#editorphone .el-form-item__label {
  float: none;
  min-width: 85px;
  width: auto !important;
  text-align: left;
  flex: auto;
}

#editorphone .tinymce .el-form-item__label {
  min-width: 100%;
}

#editorphone .el-form-item__content {
  margin-left: 0px !important;
  flex: auto;
  width: calc(100% - 95px);
}

#editorphone .avueFormNoLable .el-form-item__label,
#editorphone .avueFormNoLable .avue-crud__pagination {
  display: none;
}

#editorphone .avueFormNoLable .el-collapse-item__wrap,
#editorphone .avueFormNoLable .el-collapse {
  border-bottom: 0
}

#editorphone .avueFormNoLable .el-col {
  border-bottom: 0;
  padding-bottom: 0
}

#editorphone .el-form-item__content .el-button:first-child {
  margin-left: 90px;
}

.el-upload__tip {
  line-height: 1.2;
}


.select_user_footer{
  width: 100%;
  height: 50px;
  text-align: right;
}
.el_button_sure{
  margin-top: 5px;
  margin-right: 5px;
}
.select_user_body{
  width: 100%;
  height: 350px;
  border: 1px solid #eee;
  margin: 12px 0;
  display: flex;
  flex-direction: row;
}
.select_user_body_left{
  width: 30%;
  height: 100%;
  border: 1px solid #eee;
}
.select_user_body_left_item{
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  text-indent: 12px;
  border-radius: 4px;
}
.select_user_body_left_item:hover{
  background: #0063f5;
  color: #fff;
  border-radius: 4px;
}
.select_user_body_left_item1{
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  text-indent: 12px;
  border-radius: 4px;
  background: #0063f5;
  color: #fff;
}
.companyInfo{
  font-size: 18px;
  height: 50px;
  border-bottom: 1px solid #eee;
  font-weight: 400;
  color: #000;
  text-indent: 12px;
  line-height: 50px;
  
}
.select_user_body_right{
  width: 70%;
  height: 100%;
  border: 1px solid #eee;
  overflow: scroll;
}
.select_user_body_right_top{
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
}
.select_user_body_right_top_left{
  width: 100px;
  line-height: 50px;
  font-size: 18px;
  color: #000;
  text-align: center;
}
.select_user_body_right_top_right{
  width: 300px;
  line-height: 50px;
  font-size: 18px;
  color: #000;
  text-align: left; 

}
.select_user_body_right_top_right_item{
  width: 100px;
  height: 32px;
  border: 1px solid #0063f5;
  color: #fff;
  border-radius: 4px;
  line-height: 32px;
  text-indent: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.select_user_body_right_bottom{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.select_user_body_right_bottom_item{
  /* width: 70px; */
  height: 32px;
  border-radius: 4px;
  border: 1px solid #0063f5;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #0063f5;
  margin-left: 16px;
  margin-top: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select_user_body_right_bottom_item:hover{
  background: #0063f5;
  cursor: pointer;
}
.clodesssd1{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clodesssd{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: red;
  background: #fff;
  line-height: 24px;
  font-size: 14px;
  text-align: center;
  text-indent: 0;
  margin-top: 4px;
}
.clodesssd:hover{
  cursor: pointer;
}
.office_things{
  width: 100%;
}
.width1000{
  width: 1600px;
}
.table_header1{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  background: rgb(246, 246, 246);
}
.table_header2{
  width: 100%;
  height: 40px;
  text-indent: 2em;
  line-height: 40px;
  border: 1px solid rgb(221, 221, 223);
}
.table_body1{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
}
.table_bottom_buttons{
  width: 100%;
  height: 40px;
}
.new-add{
  margin-top: 7px;
}
.table_header1_xuhao{
  width: 15%;
  height: 100%;
  text-align: center;
  line-height: 40px;
}
.table_header1_qingdan{
  width: 40%;
  height: 100%;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
}
.el_input_items{
  width: 80%;
}
.table_header1_shuliang{
  width: 30%;
  height: 100%;
  text-align: center;
  line-height: 40px;
}
.table_header1_caozuo{
  width: 20%;
  height: 100%;
  text-align: center;
  line-height: 40px;
}
.border{
  border: 1px solid rgb(221, 221, 223);
}
.wp_search{
  width: 100%;
  height: 40px;
}
.wp_search_input{
  width: 40%;
  margin-top: 4px;
}
.wp_table_header{
  width: 100%;
  height: 40px;
  background: rgb(250, 250, 250);
  display: flex;
  flex-direction: row;
}

.wp_table_header_xuhao{
  width: 10%;
  border-right: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_name{
  width: 50%;
  border-right: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_shuliang{
  width: 20%;
  border-right: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_danjia{
  width: 20%;
  border-right: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}

.wp_table_body{
   width: 100%;
  height: 40px;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: row;

}

.wp_table_header_xuhao1{
  width: 10%;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_name1{
  width: 50%;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_shuliang1{
  width: 20%;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_danjia1{
  width: 20%;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #000;
  line-height: 40px;
  text-align: center;
}

.upload-demo{
  width: 400px;
}
.table-header-items{
  border: 1px solid #DCDFE6;
  text-align: center;
}
.width100{
  width: 100px;
}
.width200{
  width: 13%;
}
.required{
  color:#FE6350;
  position: relative;
  top: 3px;
  right: 3px;
}
.el-inputs_{
  text-align: center;
}
.marginleft{
  margin-left: -100px;
}

  .del_items{
    width: 350px;
    height: 32px;
    margin-top: 4px;
    background: rgb(246, 246, 246);
    border-radius: 4px;
    display: flex;
    flex-direction: row;

  }
  .del-items-left{
    width: 32px;
    height: 32px;
    text-align: center;
  }
  
  .del-items-left > img{
    width: 22px;
    height: 22px;
    margin-top: 5px;
  }
  .del-items-middle{
    width: 180px;
    height: 32px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .del-items-processing{
     width: 80px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 32px;
    color: #FE8B04;
  }
  .del-items-refuse{
     width: 80px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 32px;
    color: #FD513B;
  }
  .del-items-adopt{
     width: 80px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 32px;
    color: #10A300;
  }
  .del-items-right{
    width: 90px;
    height: 32px;
  }
  .del-items-close{
    width: 32px;
    height: 32px;
    margin-left: 24px;
  }
.del-items-close > img{
    width: 16px;
    height: 16px;
  }


  .search-box{
    width: 100%;
    height: 32px;
    margin: 8px 0;
    display: flex;
    flex-direction: row;
  }
  .search-box-left{
    width: 50%;
    height: 32px;
    text-align: center;
  }
  .search-box-left-input{
    width: 300px;
  }
  .search-box-right{
    width: 50%;
    height: 32px;
    text-align: center;
  }
  .el-paganation{
    width: 100%;
    height: 40px;
    text-align: center;
  }
  .el-paganation-i{
    margin-top: 16px;
  }
  
.upload-demo{
  width: 400px;
}
.table-header-items{
  border: 1px solid #DCDFE6;
  text-align: center;
}
.width100{
  width: 100px;
}
.width200{
  width: 13%;
}
.required{
  color:#FE6350;
  position: relative;
  top: 3px;
  right: 3px;
}
.el-inputs_{
  text-align: center;
}
.marginleft{
  margin-left: -100px;
}
.text-overflow{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.left1{
  width: 50%;
  height: 100%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.right1{
  width: 50%;
  height: 100%;
  text-align: center;
}
.right1 > img{
  width: 100%;
  width: 42.5px;
  height: 37px;
}
.flex_1{
  display: flex;
  flex-direction: row;
}
.textaligncenter{
  text-align: center;
}
.table-box{
  width: 1600px;
}
</style>
